import React, { useEffect, useState } from 'react';
import { SmileOutlined, ShopOutlined, LockOutlined } from '@ant-design/icons';
import {
    Button,
    Divider,
    Form,
    Input,
    Modal,
    message,
    Select
} from 'antd';
import Welcome from '../../components/welcome'
import Title from '../../components/title/title'
import '../parkManagement/css/AddPark.css'
import Store from '../../store/index.js'
import { createAddBankAction, createModifyBankAction } from '../../store/action.js'



const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 15,
    },
};
const formTailLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 8,
        offset: 20,
    },
};
const wayLayout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 15,
    },
};
// 省市区下拉框数据
const options = [
    {
        value: '四川省',
        label: '四川省',
        children: [
            {
                value: '成都市',
                label: '成都市',
                children: [
                    {
                        value: '武侯区',
                        label: '武侯区',
                    },
                ],
            },
        ],
    },
    {
        value: '山东省',
        label: '山东省',
        children: [
            {
                value: '潍坊市',
                label: '潍坊市',
                children: [
                    {
                        value: '坊子区',
                        label: '坊子区',
                    },
                ],
            },
        ],
    },
]
// 所选省市区下拉框变化
const onChange = (value) => {
    console.log(value);
};
const { Option } = Select;


const AddBank = (props) => {
    console.log(props)
    const { isModify, data } = props.location.state
    const [bankTable, setBankTable] = useState(Store.getState().bankTable);
    const [parkTable, setParkTable] = useState(Store.getState().parkTable);
    const [form] = Form.useForm();
    const [checkNick, setCheckNick] = useState(false);
    useEffect(() => {
        form.validateFields(['nickname']);
    }, [checkNick, form]);

    const onCheckboxChange = (e) => {
        setCheckNick(e.target.checked);
    };

    const onCheck = async () => {
        try {
            const values = await form.validateFields();
            values.key = bankTable.length.toString()
            values.id = 'YH000' + bankTable.length
            if (isModify) {
                Modal.confirm({
                    title: '修改园区',
                    content: `你确认修改${values.name}吗？`,
                    onOk: () => {
                        Store.dispatch(createModifyBankAction(values))
                        message.success('修改成功!')
                    }
                })
            } else {
                Modal.confirm({
                    title: '新增银行',
                    content: `你确认新增${values.name}吗？`,
                    onOk: () => {
                        Store.dispatch(createAddBankAction(values))
                        message.success('新增成功!')
                    }
                })
            }
            props.history.push('/bank')
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };
    return (
        <>
            <div className='content'>
                <Welcome />
                <Divider />
                <Title title={isModify ? '编辑银行' : '新增银行'} />
                <Divider />
                <Form form={form} name="dynamic_rule" initialValues={data}>
                    <div style={{ fontSize: '1.2rem', paddingBottom: '1rem' }}>
                        <ShopOutlined style={{ color: 'rgb(25, 158, 216)', marginRight: '1rem' }} /><span>银行基础信息</span>
                    </div>
                    <Form.Item
                        {...formItemLayout}
                        name="name"
                        label="银行名称"
                        rules={[
                            {
                                required: true,
                                message: '请选择银行名称',
                            },
                        ]}
                    >
                        <Select placeholder="Please select a bank">
                            <Option value="工商银行">工商银行</Option>
                            <Option value="邮政银行">邮政银行</Option>
                            <Option value="建设银行">建设银行</Option>
                            <Option value="农业银行">农业银行</Option>
                            <Option value="中国银行">中国银行</Option>
                            <Option value="农商银行">农商银行</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        name="park"
                        label="所属园区"
                        rules={[
                            {
                                required: true,
                                message: '请选择所属园区',
                            },
                        ]}
                    >
                        <Select placeholder="Please select a bank"
                            options={[{ label: parkTable.name, value: parkTable.name }]}>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        initialValue={isModify ? [data.province, data.city, data.district] : []}
                        name="branchName"
                        label="银行支行全称"
                        rules={[
                            {
                                required: true,
                                message: '请输入银行支行全称',
                            },
                        ]}
                    >
                        <Input placeholder="请输入银行支行全称" />
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        name="address"
                        label="具体地址"
                        rules={[
                            {
                                required: true,
                                required: checkNick,
                            },
                        ]}
                    >
                        <Input placeholder="请输入具体地址" />
                    </Form.Item>
                    <div style={{ fontSize: '1.2rem', paddingBottom: '1rem' }}>
                        <ShopOutlined style={{ color: 'rgb(25, 158, 216)', marginRight: '1rem' }} /><span>银行联系信息</span>
                    </div>
                    <Form.Item
                        {...formItemLayout}
                        name="tel"
                        label="银行座机"
                        rules={[
                            {
                                required: checkNick,
                                message: '请输入银行座机',
                            },
                        ]}
                    >
                        <Input placeholder="请输入银行座机" />
                    </Form.Item>

                    <div style={{ fontSize: '1.2rem', paddingBottom: '1rem' }}>
                        <ShopOutlined style={{ color: 'rgb(25, 158, 216)', marginRight: '1rem' }} /><span>备注信息</span>
                    </div>
                    <Form.Item
                        {...formItemLayout}
                        name="note"
                        label="备注信息："
                        rules={[
                            {
                                required: checkNick,
                            },
                        ]}
                    >
                        <Input.TextArea showCount maxLength={100} placeholder='请输入备注信息' />
                    </Form.Item>

                    <Form.Item {...formTailLayout}>
                        <Button type="primary" onClick={onCheck}>
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </>
    );
}

export default AddBank;
